{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="41"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/classes">实验班级</a></li>
        <li class="active">班级学生</li>
    </ol>
    <div class="well well-sm">
        <h4>{{labclass['classname']}}</h4>
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">现有学生</a></li>
        <li><a href="#tab2" data-toggle="tab">添加学生</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div class="panel panel-primary">
                <div class="panel-heading">共<b id="total"></b>人</div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>帐号</th>
                                <th>姓名</th>
                                <th>移除</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach:existed_students">
                            <tr>
                                <td data-bind="text:accountname"></td>
                                <td data-bind="text:truename"></td>
                                <td>
                                    <button type="button" data-bind="click:$root.removeStudent">
                                        <i class="fa fa-remove"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="tab-pane" id="tab2">
            <div class="panel panel-primary">
                <div class="panel-heading">共<b></b>人</div>
                <div class="panel-body">
                    <!-- 搜索表单开始 -->
                    <div class="form-inline">
                        <div class="form-group">
                            <input type="text" id="name" placeholder="学号或姓名包含" class="form-control" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" id="btnSearch">查询</button>
                        </div>
                    </div>
                    <!-- 搜索表单结束 -->
                
                    <!-- 查询结果开始 -->
                    <table class="table table-striped table-bordered" >
                        <caption>
                            <h4>
                                <strong>查询结果</strong>
                                <button type="button" class="btn btn-sm btn-success" data-bind="click:$root.addStudents">添加选中的学生</button>
                            </h4>
                        </caption>
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>选择 &nbsp;&nbsp;<input type="checkbox" id="chkAllCheck" data-bind="click:$root.toggleCheck"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach:search_students">
                            <tr>
                                <td data-bind="text:accountname"></td>
                                <td data-bind="text:truename"></td>
                                <td>
                                    <input type="checkbox" data-bind="checked:checked">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>
{% end block %}


{% block script %}
<script type="text/javascript">
    var classid = {{labclass['classid']}}

    function Student(accountid, accountname, truename){
        var self = this;
        self.accountid = accountid;
        self.accountname = accountname;
        self.truename = truename;
        self.checked = ko.observable(false);
    }

    function ModelView(){
        var self = this;
        self.existed_students = ko.observableArray();
        self.search_students = ko.observableArray();
        self.allChecked = false;

        self.removeStudent = function(){
            accountid = this.accountid;
            truename = this.truename;
            bootbox.confirm('确实要从该班级中移除学生【' + truename + '】吗？', function(choice){
                if (choice){
                    $.ajax({
                    url :  '/deleteclassstudent?classid=' + classid + '&accountid=' + accountid,
                    type : 'delete',
                    dataType: 'json',
                    success : function(result){
                        if(result.code == 'success'){
                            loadClassStudents();
                        } else{
                            bootbox.alert(result.message);
                        }
                    }
                   });
                }
            });
        };

        self.addStudents = function(){
            var accountids = "";
            for(var i=0;i<self.search_students().length;i++){
                var item = self.search_students()[i];
                if (item.checked()){
                    accountids += item.accountid + ",";
                }
            }
            var data = {
                'classid' : classid,
                'accountids' : accountids
            };
            $.ajax({
                url : '/class_addstudenttoclass',
                type : 'post',
                data : JSON.stringify(data),
                dataType : 'json',
                success : function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！');
                        loadClassStudents();
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            });
        };

        self.toggleCheck = function(){
            value = !(self.allChecked)
            for(var i=0;i<self.search_students().length;i++){
                var item = self.search_students()[i];
                item.checked(value);
            }
            self.allChecked = value;
            return true;
        };
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        loadClassStudents();

        $("#btnSearch").click(function(){
            search();
        });
    });

    function loadClassStudents(){
        $.getJSON('/class_getclassstudents?id=' + classid, function(results){
            var students = [];
            for(var i=0;i<results.length;i++){
                var item = results[i];
                students.push(new Student(item.accountid, item.accountname, item.truename));
            }
            modelView.existed_students(students);
            $("#total").html(students.length.toString());
        });
    }

    function search(){
        search_data = {
            name : $("#name").val(),
            pagesize : 100
        }
        $("#chkAllCheck").attr("checked", false);
        modelView.allChecked = false;
        $.ajax({
            url : '/student_studentsearch',
            type : 'get',
            data : search_data, // 注意，get模式下使用JSON.stringify(search_data)无效
            dataType : 'json', 
            success : function(results){
                search_students = [];
                for(var i=0;i<results.search_students.length;i++){
                    item = results.search_students[i];
                    search_students.push(new Student(item.accountid, item.accountname, item.truename));
                }
                modelView.search_students(search_students);
            }
        });
    }
</script>
{% end block %}
